import { Flex, Modal, ModalProps } from "antd"
import { useEffect } from "react"
import styled from "styled-components"

export const SFlex = styled(Flex)`
	margin: 0;
	padding: 0;
	width: 100%;
	height: 100%;
	.redColor {
		color: #fb6260;
	}
	.enableColor {
		color: #13ce66;
	}

	.deleteRgba {
		min-width: 60px;
		height: 20px;
		line-height: 20px;
		padding: 0 5px;
		display: inline-block;
		border-radius: 5px;
		color: #cb992f;
		text-align: center;
		font-size: 14px;
		background: rgba(253, 168, 77, 0.3);
	}

	.disableRgba {
		background-color: #fef0f0;
		color: #f56c6c;
		display: inline-block;
		height: 18px;
		padding: 0 6px;
		line-height: 18px;
		font-size: 12px;
		border: 1px solid #fde2e2;
		border-radius: 4px;
		box-sizing: border-box;
		white-space: nowrap;
	}
	.normalRgba {
		min-width: 60px;
		height: 20px;
		line-height: 20px;
		padding: 0 5px;
		display: inline-block;
		border-radius: 5px;
		color: #67c23a;
		margin-top: 2px;
		margin-bottom: 2px;
		text-align: center;
		font-size: 14px;
		background: rgba(0, 160, 0, 0.2);
	}
	.failRgba {
		min-width: 60px;
		height: 20px;
		line-height: 20px;
		padding: 0 5px;
		display: inline-block;
		border-radius: 5px;
		font-size: 14px;
		color: #f46868;
		margin-top: 2px;
		margin-bottom: 2px;
		text-align: center;
		background: rgba(88, 163, 247, 0.3);
	}
	.rejectRgba {
		min-width: 60px;
		height: 20px;
		line-height: 20px;
		padding: 0 5px;
		display: inline-block;
		border-radius: 5px;
		font-size: 14px;
		color: #7f7f7f;
		margin-top: 2px;
		margin-bottom: 2px;
		text-align: center;
		background: rgba(88, 163, 247, 0.3);
	}

	.normalRgba {
		color: #67c23a;
		margin-top: 2px;
		margin-bottom: 2px;
		background: rgba(0, 160, 0, 0.2);
	}

	.disableRgba,
	.normalRgba {
		min-width: 60px;
		height: 20px;
		line-height: 20px;
		padding: 0 5px;
		display: inline-block;
		border-radius: 5px;
		text-align: center;
		font-size: 14px;
	}

	.disableRgba {
		color: #fb6260;
		background: rgba(250, 89, 89, 0.3);
	}

	.deleteRgba {
		color: #cb992f;
		background: rgba(253, 168, 77, 0.3);
	}

	.deleteRgba,
	.lockingRgba {
		min-width: 60px;
		height: 20px;
		line-height: 20px;
		padding: 0 5px;
		display: inline-block;
		border-radius: 5px;
		text-align: center;
		font-size: 14px;
	}

	.lockingRgba {
		color: #58a3f7;
		margin-top: 2px;
		margin-bottom: 2px;
		background: rgba(88, 163, 247, 0.3);
	}

	.dis {
		opacity: 0.5;
	}
`

const StyModal = styled(Modal)`
	padding: 2rem;
	.ant-modal-body .ant-form .ant-form-item {
		margin: 1rem;
	}
	.ant-modal-footer {
		margin-top: 2rem;
		margin-right: 1rem;
		text-align: center;
	}
`
export const SModal = (props: ModalProps) => {
	useEffect(() => {
		const inputNodes = document.querySelectorAll("input")
		if (inputNodes) {
			for (let i = 0; i < inputNodes.length; i++) {
				inputNodes[i].autocomplete = "off"
			}
		}
	}, [])
	return <StyModal {...props} />
}

export const SLink = styled.span`
	text-decoration: underline;
	color: #1890ff;
	cursor: pointer;
`
